<template>
	<view class="page-container">
		<!-- 顶部 -->
		<view class="header">
			<!-- 顶部轮播图 -->
			<swiper class="swiper-container" autoplay interval="3000" circular>
				<swiper-item v-for="(item, index) in images" :key="index">
					<image :src="item" class="header-image" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 搜索框部分 -->
		<!-- 地图搜索部分 -->
		
		<view class="container">
			<view class="location-icon" @click="goToMapSearch">
				<text class="location-icon-text">{{ address }}</text>
				<image src="/static/全局图标/地图图标.png" class="location-icon-image" />
			</view>
			<!-- 分隔线 -->
			<view class="divider"></view>
			<!-- 日历选择器部分 -->
			<view class="search-section">
				<calendar class="cld" @change="change" :daysCount="daysCount">
				</calendar>
			</view>
			<!-- 分隔线 -->
			<view class="divider"></view>
			<!-- 文本搜索部分 -->
			<view class="search-box">
				<view class="search-label">搜索</view>
				<input type="text" placeholder="请输入目的地、酒店">
			</view>
			<!-- 分隔线 -->
			<view class="divider"></view>
			<!-- 价格/星级筛选 -->
			<view>
				<button class="filter-button" @click="openVisible">价格/星级</button>
				<drop-filter :searchData.sync='searchData' v-model='visible'></drop-filter>
			</view>
			<!-- 分隔线 -->
			<view class="divider"></view>
			<!-- 查询按钮 -->
			<view>
				<button class="search-button" @click="onSearch">查询</button>
			</view>
		</view>
		<!-- 活动内容部分 -->
		<view class="activity-container" @click="goToActivities">
			<!-- <view class="activity-card" v-for="activity in activities" :key="activity.id">
				<image :src="activity.image" :alt="activity.title" class="activity-image" />
				<view class="activity-overlay">
					<text class="activi	ty-title">{{ activity.title }}</text>
					<text class="activity-description">{{ activity.description }}</text>
				</view>
			</view> -->
			<view class="activity-card">
				参与优惠券抢购
			</view>
		</view>
		<!-- 标签部分 -->
		<scroll-view class="category-tags" scroll-x="true">
			<view class="tag" v-for="tag in tags" :key="tag.text" :style="{ backgroundColor: tag.color }">
				{{ tag.text }}
			</view>
		</scroll-view>

		<!-- 民宿推荐部分 -->
		<view class="hotel-list">
			<view class="hotel-card" v-for="hotel in hotels" :key="hotel.homestayId">
				<image :src=hotel.pictures class="hotel-image" />
				<view class="hotel-info">
					<view class="hotel-title-container">
						<text class="hotel-title">{{ hotel.homestayName }}</text>
						<!-- 只有当 featuresList 不为空时，才显示这个标签 -->
						<view v-if="hotel.featuresList && hotel.featuresList.length > 0" class="special-tag">特色民宿</view>
					</view>
					<view class="hotel-rating">
						<text class="rating-value">{{ hotel.score }}分</text>
						<text class="hotel-reviews">{{ hotel.num }}条评论</text>
					</view>
					<view class="hotel-pricing">
						<text class="current-price">￥{{ hotel.minPrice }}</text>起
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<bottom-nav></bottom-nav>
	</view>
</template>

<script>
	import calendar from '@/components/date-picker/date-picker';
	import dropFilter from '@/components/drop-filter/drop-filter.vue';
	import bottomNav from '@/components/bottom-nav/bottom-nav.vue';
	export default {
		data() {
			return {
				//图片基础前部URL
				baseImageUrl: 'http://localhost:8086/business/common2/download?name=', // 后端图片的基础路径
				//酒店推荐
				hotels: [],
				// ...其他酒店数据
				images: [
					'/static/首页图片/顶部轮播图/房子1.jpg',
					'/static/首页图片/顶部轮播图/房子2.jpg',
					'/static/首页图片/顶部轮播图/房子3.jpg',
				],
				activities: [{
						id: 1,
						title: '巡航体验',
						description: '全线低至5折',
						image: '/static/首页图片/活动/活动1.jpg'
					},
					{
						id: 2,
						title: '天文体验',
						description: '观星优惠价',
						image: '/static/首页图片/活动/活动2.jpg'
					},
					{
						id: 3,
						title: '民宿八折',
						description: '体验特色优惠价',
						image: '/static/首页图片/活动/活动3.jpg'
					},
					{
						id: 4,
						title: '包接包送',
						description: '一站式服务',
						image: '/static/首页图片/活动/活动4.jpg'
					},
				],
				//价格/星级筛选组件
				visible: false,
				searchData: {
					min_price: '',
					max_price: '',
					cos_ratio: '',
					cos_fee: '',
					comment_score: '',
					sort_field: '',
					sort_order: ''
				},

				//地图部分
				address: '请在地图中选择地址',

				//日期选择器
				showCaledar: false,
				daysCount: 130,

				//tags部分
				tags: ['推荐', '亲子', '周边', '情侣', '奢华', '经济'],
			};
		},
		components: {
			calendar,
			dropFilter
		},
		//标签部分加上随机颜色
		onLoad() {
			this.fetchHotelsData();
			this.returnRandomColor();
		},
		onBackPress() {
			if (this.showCaledar !== false) {
				this.showCaledar = false;
				return true;
			}
		},
		methods: {
			gotoChart(){  //跳转聊天
				uni.navigateTo({
					url: '/pages/chat/chat',
					success: function(res) {
						// 页面跳转成功
					},
					fail: function() {
						// 页面跳转失败
						uni.showToast({
							title: '无法打开酒店详情',
							icon: 'none'
						});
					}
				});
				
			},
			fetchHotelsData() {
				uni.request({
					url: 'http://localhost:8086/business/homestayInfo/homepageRecommendation', // 你的后端API地址
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							// 假设返回的数据格式是数组
							const hotelsWithFullImages = res.data.data.map(hotel => ({
								...hotel,
								pictures: this.baseImageUrl + hotel.pictures
							}));
							this.hotels = hotelsWithFullImages;
						} else {
							// 处理错误情况
							uni.showToast({
								title: '获取数据失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			navigateTo(page) {
				uni.navigateTo({
					url: page,
				});
			},
			returnRandomColor() {
				this.tags = this.tags.map(tag => {
					return {
						text: tag,
						color: this.randomColor()
					};
				});
			},
			randomColor() {
				// 生成随机颜色
				const letters = '0123456789ABCDEF';
				let color = '#';
				for (let i = 0; i < 6; i++) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			},
			onSearch() {
				// 实现查询逻辑
				// 可以根据 this.searchData 的值来进行数据查询
			},
			//价格星级筛选方法
			openVisible() {
				this.visible = true
			},
			change({
				choiceDate,
				dayCount
			}) {
				//参数解释
				//1.choiceDate 时间区间（开始时间和结束时间）
				//2.dayCount 共多少晚

				// console.log(choiceDate, dayCount);
				console.log('入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' +
					choiceDate[1].week +
					')' + '  共 ' + dayCount + ' 晚 ');
			},
			goToMapSearch() {
				// 触发地图搜索的方法
				// 你可能需要等待用户选择地址的操作，然后更新address变量
				// 以下是伪代码，你需要根据你的应用逻辑来实现具体的地址选择和更新逻辑
				uni.navigateTo({
					// url: '/pages/mapsearch/mapsearch',
					url:'/pages/map/map',
					success: (res) => {
						// 这里假设地图搜索页会在某个时候更新全局变量或者调用某个API来获取选中的地址
						// 以下代码需要根据你具体的应用逻辑来实现
						// this.address = getSelectedAddressFromGlobalStateOrApi();
					}
				});
			},
			goToActivities() {
				// 触发地图搜索的方法
				// 你可能需要等待用户选择地址的操作，然后更新address变量
				// 以下是伪代码，你需要根据你的应用逻辑来实现具体的地址选择和更新逻辑
				uni.navigateTo({
					url: '/pages/activities/activities',
					success: (res) => {
						// 这里假设地图搜索页会在某个时候更新全局变量或者调用某个API来获取选中的地址
						// 以下代码需要根据你具体的应用逻辑来实现
						// this.address = getSelectedAddressFromGlobalStateOrApi();
					}
				});
			},
			
		},
		watch: {
			searchData(news) {
				console.log(news, '监听最新的值')
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import '../../src/assets/scss/global.scss';
	@import '../../src/assets/scss/首页/header.scss';
	@import '../../src/assets/scss/首页/search.scss';
	@import '../../src/assets/scss/首页/category.scss';
	@import '../../src/assets/scss/首页/card-list.scss';
	@import '../../src/assets/scss/首页/acativity.scss';
	@import '../../src/assets/scss/首页/hotels.scss';
</style>